{% extends 'mac_basic.html' %}


{% block title %}
    部门列表
{% endblock %}


{% block css %}
    <style>
        .department_list {
            padding: 50px 60px 0 50px;
        }
        .department{
            padding-left: 50px;
            padding-bottom: 10px;
            border-bottom: 3px solid #8B8989;
        }
        .page {
                float: right;
                margin-right: 60px;
            }
        td,th{
            text-align: center;
        }
    </style>
{% endblock %}


{% block content %}
    <div class="department">
        <h3>部门<small> 列表</small></h3>
        <a class="btn btn-primary" href="{% url 'department_add' %}">新增</a>
    </div>

    <div class="table-responsive department_list">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>#</th>
              <th>部门代码</th>
              <th>部门名称</th>
              <th>操 作</th>
            </tr>
          </thead>
          <tbody>
            {% for obj in department_obj %}
                <tr>
                  <th scope="row">{{forloop.counter}}</th>
                  <td>{{ obj.department_code }}</td>
                  <td>{{ obj.department_name }}</td>
                  <td>
                      <button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target=".bs-example-modal-sm" data-whatever="{% url 'department_delete' obj.id %}">
                          <i class="fa fa-trash-o" aria-hidden="true"></i> 删除
                      </button>
                      |
                      <a href="{% url 'department_edit'  obj.id %}" class="btn btn-info btn-xs"><i class="fa fa-pencil-square" aria-hidden="true"></i> 修改</a>
                  </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
    </div>
    <div class="page">
        <nav aria-label="Page navigation">
          <ul class="pagination">
            {{ pages | safe }}
          </ul>
        </nav>
    </div>

{% endblock %}


{% block model %}
    <div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
            <a href="#" class="btn btn-primary">确 定</a>
          </div>
        </div>
      </div>
    </div>
{% endblock %}


{% block js %}
    <script> 
     //绑定模态框展示的方法 
    $('.bs-example-modal-sm').on('show.bs.modal', function (event) {  
        var button = $(event.relatedTarget) // 触发事件的按钮  
        var recipient = button.data('whatever') // 解析出whatever内容  
        var modal = $(this)  //获得模态框本身
        modal.find('.modal-title').text('删除部门')  // 更改将title的text
        modal.find('.modal-footer a').attr('href', recipient)  
    })  
    </script>  
{% endblock %}